<%@ page import="java.net.URLDecoder" %>
<%@ page contentType="text/html; charset=UTF-8" language="java" %>
<%@ include file="include.jsp" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ include file="menu.jsp" %>

<script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../js/thickbox-compressed.js"></script>
<link type="text/css" href="../css/thickbox.css" rel="stylesheet"/>
<script type="text/javascript">
    $(document).ready(function() {


        //hide category_body after the first one
        $(".category_body").hide();
        $(".newApplication").hide();


        //toggle category_body
        $(".category_head").click(function() {
            $(this).next(".category_body").slideToggle(500)
            return false;
        });

        $(".category_head").find("a").click(function() {
            window.location = $(this).attr("href");
        });

        //collapse all messages
        $(".collpase_all_message").click(function() {
            $(".category_body").slideUp(500)
            return false;
        });

        //show all messages
        $(".show_all_message").click(function() {
            $(".category_body").slideDown()
            return false;
        });

        $(".deleteLink").click(function() {
            var appId = $(this).parent().parent().attr('id');

            $.post("removeApplication.htm", { applicationId: appId },
                    function(data) {
                        if (data == '') {
                            $("#" + appId).remove();
                        } else {
                            alert(data);
                        }
                    });

        });


    });


</script>

<style type="text/css">


    .categories {
        width: 1000px;
        margin: 0 auto;

    }

    .form {
        width: 1000px;
        margin: 0 auto;
        font-family: sans-serif;
        font-style: normal;

    }

    .form select {
        width: 300px;
        border: medium solid #FFFFFF;
        background-color: #e0e0e0;
    }

    #categoryName {
        width: 300px;
    }

    .form td {
        font-size: x-small;
        font-weight: bold;

    }

    input.button {
        cursor: pointer;
        background-color: #FFCC00;
        font-weight: bold;
        width: 100px;

    }

    .applications table {
        padding: 5px;
        background-color: #99ccff;
        border-collapse: collapse;
        width: 600px;

    }

    .category_head {

        line-height: 30px;
        background-color: #6699cc;
        margin: 5px;
        font-size: 12px;
        font-family: Verdana;
    }

    .category_body {
        margin: 10px;
    }

    .categories td {

        line-height: 25px;
        font-size: 12px;
        font-family: Verdana;
    }

    .header {
        background-color: #FFCC00;
    }

    .active {
        background-color: #E1FFA7;
    }

    .inactive {
        background-color: #FFDDDC;
    }

    .applications td {
        line-height: 15px;

    }

    .title {
        text-align: center;
        font-family: sans-serif;
        font-size: larger;
        color: #6699cc;
        width: 1000px;
        margin: 0 auto;
    }

</style>

<div class="title">Управление категориями и приложениями</div>
<br>

<div class="categories">

    <c:forEach items="${cats}" var="c">
        <div class="category">
            <div class="category_head">
                <table width="100%">
                    <tr>
                        <td width="80%" style="font-weight: bold;"><c:out value="${c.categoryName}"/></td>
                        <c:set var="statusName" value="${c.status.statusName}"/>
                        <td width="10%" align="center"

                                <c:if test="${statusName eq 'active'}"><c:out value="class=active"/></c:if>
                                <c:if test="${statusName eq 'inactive'}"><c:out value="class=inactive"/></c:if>

                                ><c:out value="${c.status.alias}"/></td>
                        <c:url var="editUrl" value="/admin/createCategory.htm">
                            <c:param name="action" value="edit"/>
                            <c:param name="categoryId" value="${c.categoryId}"/>
                        </c:url>
                        <td align="center"><a href="${editUrl}"><img style="border:0px;" src="../images/edit.png"
                                                                     alt="Edit"></a></td>
                        <c:url var="deleteUrl" value="/admin/deleteCategory.htm">
                            <c:param name="action" value="delete"/>
                            <c:param name="categoryId" value="${c.categoryId}"/>
                        </c:url>
                        <td align="center"><a href="${deleteUrl}"><img style="border:0px;"
                                                                       src="../images/delete_red.png" alt="Delete"></a>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="category_body">
                <b><c:out value="${c.description}"/></b><br>

                <div class="applications">
                    <table border="1">
                        <tr class="header">
                            <td width="30%">Приложение</td>
                            <td width="50%">Описание</td>
                            <td width="10%">Статус</td>
                            <td width="10%">Действия</td>
                        </tr>
                        <c:forEach items="${c.applications}" var="a">
                            <c:set var="appId" value="${a.applicationId}"/>
                            <tr id="${appId}">
                                <td><c:out value="${a.applicationName}"/></td>
                                <td><c:out value="${a.description}"/></td>
                                <c:set var="appStatusName" value="${a.status.statusName}"/>
                                <td align="center"
                                        <c:if test="${appStatusName eq 'active'}"><c:out value="class=active"/></c:if>
                                        <c:if test="${appStatusName eq 'inactive'}"><c:out
                                                value="class=inactive"/></c:if>

                                        ><c:out value="${a.status.alias}"/></td>

                                <td align="center">
                                    <c:set var="catId" value="${c.categoryId}"/>
                                    <c:set var="appId" value="${a.applicationId}"/>

                                    <c:url var="editAppUrl"
                                           value="/jsp/newApplication.jsp?height=200&width=500&modal=true">
                                        <c:param name="categoryId" value="${catId}"/>
                                        <c:param name="appId" value="${appId}"/>
                                    </c:url>


                                    <a href="${editAppUrl}" class="thickbox" title="Edit Application"><img
                                            style="border:0px;" src="../images/edit.png" alt="Edit"></a>&nbsp;
                                    <a href="#" class="deleteLink" title="Delete Application"><img style="border:0px;"
                                                                                                   src="../images/delete_red.png"
                                                                                                   alt="Delete"></a>
                                </td>

                            </tr>
                        </c:forEach>
                    </table>
                    <br>
                    <a href="/diplom/jsp/newApplication.jsp?height=200&width=500&modal=true&categoryId=${c.categoryId}"
                       class="thickbox" title="Add Application"><img style="border:0px;" src="../images/add.png"
                                                                     alt="add application"></a>
                </div>
            </div>
        </div>
    </c:forEach>
    <br>
    <a href="#" class="show_all_message">Развернуть все</a>&nbsp;
    <a href="#" class="collpase_all_message">Свернуть все</a>

</div>

<br>

<div class="form">
    <form:form method="POST" commandName="newCategory">
        <table style="width:800px">
            <tr>
                <td>Имя категории</td>
                <td>
                    <form:input path="categoryName" id="categoryName"/>
                </td>
                <td><form:errors path="categoryName" cssStyle="color:red"/></td>
            </tr>
            <tr>
                <td>Описание</td>
                <td>
                    <form:textarea path="description" rows="5" cols="35"></form:textarea>
                </td>
                <td><form:errors path="description" cssStyle="color:red;"/></td>
            </tr>
            <tr>
                <td>Статус</td>
                <td>
                    Активна : <form:radiobutton path="status" value="active"/><br>
                    Неактивна : <form:radiobutton path="status" value="inactive"/>
                </td>
                <td><form:errors path="status" cssStyle="color:red;"/></td>
            </tr>

            <tr>
                <td></td>
                <td align="right"><input type="submit" value="submit" class="button"></td>
                <td></td>
            </tr>
        </table>

    </form:form>

</div>